import React from 'react';
import { Modal, Form, Input, notification } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import { editScores, scoresList } from '@/services/api';
import { SIZE, PAGE } from '@/utils/constant';

interface props {
  onClose: () => void;
  dispatch: any;
}

interface UserFormProps extends FormComponentProps {
  ref: any;
  scoresData: any;
}

const ref: any = React.createRef();
const { Item } = Form;
const MyForm = Form.create<UserFormProps>()(({ form: { getFieldDecorator }, scoresData }: any) => {
  const formItemLayout = {
    labelCol: {
      xs: { span: 4, offset: 4 },
    },
    wrapperCol: {
      sm: { span: 8 },
    },
  };
  return (
    <Form layout="horizontal" {...formItemLayout}>
      <Item label="语文">
        {getFieldDecorator('chinese', {
          initialValue: scoresData.chinese,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
      <Item label="数学">
        {getFieldDecorator('math', {
          initialValue: scoresData.math,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
      <Item label="英语">
        {getFieldDecorator('english', {
          initialValue: scoresData.english,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
      <Item label="政治">
        {getFieldDecorator('politics', {
          initialValue: scoresData.politics,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
      <Item label="历史">
        {getFieldDecorator('history', {
          initialValue: scoresData.history,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
      <Item label="地理">
        {getFieldDecorator('geographic', {
          initialValue: scoresData.geographic,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
      <Item label="生物">
        {getFieldDecorator('biological', {
          initialValue: scoresData.biological,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
      <Item label="物理">
        {getFieldDecorator('physical', {
          initialValue: scoresData.physical,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
      <Item label="化学">
        {getFieldDecorator('chemical', {
          initialValue: scoresData.chemical,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
      <Item label="体育">
        {getFieldDecorator('sport', {
          initialValue: scoresData.sport,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
      <Item label="音乐">
        {getFieldDecorator('music', {
          initialValue: scoresData.music,
          rules: [
            {
              required: true,
              message: '必填',
            },
            {
              validator(rule: any, value: any, callback: any) {
                const reg = /^[0-9]*$/;
                if (!reg.test(value)) {
                  callback(new Error('请输入数字'));
                }
                callback([]);
              },
              message: '请输入数字',
            },
          ],
        })(<Input placeholder="请输入" />)}
      </Item>
    </Form>
  );
});

const EditScoresModal = ({ onClose, dispatch }: props) => {
  const scoresData = JSON.parse(sessionStorage.getItem('scoresData') || '');
  return (
    <Modal
      visible
      onCancel={onClose}
      maskClosable={false}
      title="修改成绩"
      onOk={() => {
        ref.current.validateFields({ first: true }, (err: any, val: any) => {
          const newValue = {
            ...scoresData,
            ...val,
          };
          delete newValue.student;

          if (!err) {
            editScores(newValue).then((resp: any) => {
              if (resp.status === 'success') {
                notification.success({ message: '成绩修改成功' });
                onClose();
                dispatch({
                  type: 'OPEN_LOADING',
                });
                scoresList({ page: PAGE, size: SIZE })
                  .then((res: any) => {
                    if (res.status === 'success') {
                      dispatch({
                        type: 'GET_DATA',
                        payload: res.data.data,
                      });
                      dispatch({
                        type: 'CHANGE_PAGINATION',
                        payload: {
                          current: PAGE,
                          pageSize: SIZE,
                          total: res.data.meta.total,
                        },
                      });
                    }
                    dispatch({
                      type: 'CLOSED_LOADING',
                    });
                  })
                  .catch(() => {
                    dispatch({
                      type: 'CLOSED_LOADING',
                    });
                  });
              }
            });
          }
        });
      }}
    >
      <MyForm ref={ref} scoresData={scoresData} />
    </Modal>
  );
};

export default EditScoresModal;
